<template>
  <div class="dayin">
    <el-button type="primary" @click="print()" class="dayin_btn"
      >打印预览</el-button
    >
    <h3 style="text-align: center;">{{ Infomation }}</h3>
    <div ref="print" id="printArea">
      <div class="wai" v-for="(item, index) in dayinlist" :key="index">
        <div class="nei">
          <span class="span_1" v-if="item.model_number">{{item.model_number ? item.model_number.model_number : ""}}</span>
          <span class="span_1" v-if="item.modelname=='床板'">床板</span>
          <span class="span_1" v-if="item.modelname=='床帮'">床帮</span>
          <span class="span_1" v-if="item.modelname=='床头'">床头</span>
          <span class="span_2" v-if="item.modelname=='床头'">{{item.specification ? item.specification.specification : ""}}</span>
          <span class="span_2" v-if="item.modelname=='床板'">{{item.specification ? item.specification.specification : ""}}</span>
          <span class="span_3">{{ item.order_number }}</span>
          <span class="span_4">{{ item.color ? item.color.color : "" }}</span>
          <span class="span_5"></span>
          <span class="span_6"></span>
          <span class="span_7">{{ formatterTime(item.order_date) }}</span>
        </div>
        </div>
        <div style="page-break-after: always"  v-if="index<(dayinlist.length-1)"></div>
      </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dayinlist: [],
      Infomation: "",
    };
  },
  mounted() {
    this.dayinlist = JSON.parse(this.$route.query.data);
    this.Infomation = this.$store.getters.Infomation.company_name;
    console.log(this.dayinlist);
  },
  methods: {
    formatterTime(data) {
      return /\d{4}-\d{1,2}-\d{1,2}/g.exec(data).splice(0, 11)[0];
    },
    print() {
      this.$print(this.$refs.print);
    },
  },
};
</script>
<style scoped>
.dayin {
  box-sizing: border-box;
}
#printArea {
  width:100%;
  margin: 0 auto;
}
.wai {
  width: 58mm;
  height: 143mm;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
}
.nei {
  width: 40mm;
  height: 63mm;
  position: absolute;
  bottom: 30mm;
  right:2mm;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-align: left;
}
.nei span {
  display: block;
  width: 100%;
  font-size:16px;
  font-weight: bold;
  padding-left:5mm;
}
.nei .span_1{
  height:10mm;
  line-height: 10mm;
}

.nei .span_2{
  height:8mm;
  line-height:8mm;

}

.nei .span_3{
  height:8mm;
  line-height:8mm;

}
.nei .span_4{
  height:8mm;
  line-height: 8mm;

}
.nei .span_5{
  height:9mm;
  line-height: 9mm;

}

.nei .span_6{
  height:10mm;
  line-height: 10mm;

}

.nei .span_7{
  height:10mm;
  line-height: 10mm;

}
@media print {
  #printArea {
   width:100%;
  }
  .wai {
    width: 58mm;
    height: 143mm;
    float: left;
    position: relative;
  }
  .nei {
    width: 40mm;
    height: 63mm;
    bottom:30mm;
    right:2mm;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: left;
  }
  .nei span {
  display: block;
  width: 100%;
  font-size:16px;
  font-weight: bold;
  padding-left:5mm;
}
}

.nei span {
  display: block;
  width: 100%;
  font-size:16px;
  font-weight: bold;
}


.nei .span_1{
  height:10mm;
}

.nei .span_2{
  height:8mm;
}

.nei .span_3{
  height:8mm;
}
.nei .span_4{
  height:8mm;
}
.nei .span_5{
  height:9mm;
}

.nei .span_6{
  height:10mm;
}

.nei .span_7{
  height:10mm;
}
.divnone{
  display: none;
}

@page {
  size: auto; /* auto is the initial value */
  margin: 3mm; /* this affects the margin in the printer settings */
}
.procedure {
  word-wrap: break-word;
}
</style>
